<!--
 * @文件名称：  comSetter.vue
 * @包路径：   comSetter
 * @版权所有： 北京数字医信科技有限公司 (C) 2020
 *
 * @文件描述:  comSetter
 * @版本:       comSetter
 * @作者        zhangshumiao
 * @创建时间    2020/5/25 18:30
 *
 * @修改记录： comSetter
  -----------------------------------------------------------------------------------------------
   ----------- 时间      |   修改人    |     修改的方法       |         修改描述   ---------------
  -----------------------------------------------------------------------------------------------
-->
<template>
  <el-row>
    姓：<input type="text" placeholder="firstName" v-model="firstName"><br>
    名：<input type="text" placeholder="lastName" v-model="lastName"><br>
    姓名1(单向):<input type="text" placeholder="FullName1" v-model="fullName1"><br>
    姓名2(双向):<input type="text" placeholder="FullName2" v-model="fullName3"><br>
    <el-button @click="btn">点击</el-button>
  </el-row>
</template>

<script>
export default {
  name: 'comSetter',
  data() {
    return {
      firstName: 'A',
      lastName: 'B',
      fullName2: 'A B',
      str: ''
    }
  },
  computed: {
    fullName1() { // 计算属性中的get方法，方法的返回值就是属性值
      return this.firstName + ' ' + this.lastName
    },
    fullName3: {
      get() { // 回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
        return this.firstName + ' ' + this.lastName
        // return 22
      },
      set(val) { // 监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
        // val就是fullName3的最新属性值
        console.log(val)
        const names = val.split(' ');
        console.log(names)
        this.firstName = names[0];
        this.lastName = names[1];
        this.str = 'ss';
      }
    }
  },
  methods: {
    btn() {
      console.log(this.fullName3);
      console.log(this.str);
    }
  }
}
</script>

<style>

</style>
